<template>
  <view class="category">
    <ugo-search></ugo-search>
    <view class="main">
      <view class="left">
        <view
          class="item"
          :class="current===index?'active':''"
          v-for="(item,index) in leftTitles"
          :key="item"
          @click="changeItem(index)"
        >{{item}}</view>
      </view>
      <view class="right">
        <view
          class="goods-group"
          v-for="item in goods"
          :key="item.cat_id"
        >
          <!-- 标题 -->
          <view class="goods-group-title">{{item.cat_name}}</view>
          <!-- 内容 -->
          <view class="goods-group-list">
            <navigator
              class="goods-item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
              :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`"
            >
              <u-image
                :src="item2.cat_icon"
                width="120"
                height="120"
              ></u-image>
              <view class="cat_name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 接口返回的完整的数据
      // categries: [],
      // 当前选中菜单的下标
      current: 0,
      leftTitles: [],
      goods: [],
    };
  },
  onLoad() {
    // 获取商品分类数据
    this.getCategories();
  },
  methods: {
    // 获取商品分类数据
    async getCategories() {
      // 普通的全局变量
      this.categries = await this.$u.http.get("/categories");
      // 计算出左侧标题数据
      this.leftTitles = this.categries.map((item) => item.cat_name);
      // 计算出右侧的商品内容
      this.goods = this.categries[this.current].children;
    },
    // 点击左侧标题元素
    changeItem(index) {
      this.current = index;
      // 计算出右侧的商品内容
      this.goods = this.categries[this.current].children;
    },
  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  // ugo-search
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
  }
}
.left {
  width: 182rpx;
  overflow: auto;
  .item {
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #585858;
  }
  .active {
    color: $theme-color;
  }
}
.right {
  flex: 1;
  overflow: auto;
  .goods-group {
    .goods-group-title {
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .goods-group-list {
      display: flex;
      flex-wrap: wrap;
      .goods-item {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10rpx;
        .cat_name {
        }
      }
    }
  }
}
</style>